<!DOCTYPE html>
<html lang="en">
<!--
maze: match visualizer
2014-2015 Markus Hsi-Yang Fritz and Sascha Meiers
-->
<head>
  <meta charset="UTF-8">
  <title>maze</title>
  <link href="{{ url_for('static', filename='bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">
  <link href="{{ url_for('static', filename='googlefonts/stylesheet.css') }}" rel="stylesheet">
  <link href="{{ url_for('static', filename='font-awesome/css/font-awesome.min.css') }}" rel="stylesheet">
  <link href="{{ url_for('static', filename='maze.css') }}" rel="stylesheet">
</head>
<body>


  <header>
    <div class="container-fluid">
      <div class="pull-left" id="title-upper-left"></div>
      <!-- Todo(meiers): make this button work -->
      <button type="button" class="pull-right button-header" id="btn-close">
        close
        <span class="glyphicon glyphicon-remove"></span>
      </button>
    </div>
  </header>

  
  <div class="container">
    <div class="row">

      <!-- Dotplot -->
      <div class="col-md-5" id="vis-wrap">
        <div class="spinner">
          <span class="fa fa-spinner fa-pulse fa-5x"></span>
        </div>
        <span id="vis"></span>
      </div>

      <!-- Info fields (matches, breakpoints etc.) -->      
      <div class="col-md-7" id="match-wrap">
        <h3>last-split matches</h3>
        <div class="list-group" id="listLASTmatches">
          <div class="spinner">
            <span class="fa fa-spinner fa-pulse fa-5x"></span>
          </div>
        </div>
        <h3>breakpoints</h3>
        <div class="list-group" id="listLASTbps">
          <div class="spinner">
            <span class="fa fa-spinner fa-pulse fa-5x"></span>
          </div>
        </div>
        <h3>reference breakpoints</h3>
        <div class="list-group" id="listLASTrefbps">
          <div class="spinner">
            <span class="fa fa-spinner fa-pulse fa-5x"></span>
          </div>
        </div>
      </div>

    </div>
  </div>

  <div id="footer-icon-wrap">
    <span class="fa fa-chevron-circle-up fa-2x" id="footer-icon"></span>
  </div>

  <footer>
    <div>maze &mdash; match visualizer</div>
    <div>part of the DELLY software <a href="https://github.com/tobiasrausch/delly" target="_blank"><span class="fa fa-github"></span></a></div>
    <div>2014-2015 Markus Hsi-Yang Fritz</div>
  </footer>

  <script src="{{ url_for('static', filename='jquery.min.js') }}"></script>
  <script src="{{ url_for('static', filename='bootstrap/js/bootstrap.min.js') }}"></script>
  <script src="{{ url_for('static', filename='d3.min.js') }}"></script>
  <script src="{{ url_for('static', filename='pako.min.js') }}"></script>
  <script src="{{ url_for('static', filename='maze_breakpoints.js') }}"></script>
</body>
</html>
